<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        </meta>
        <meta content="initial-scale=1, maximum-scale=1,user-scalable=no" name="viewport"/>
        <title>
            Picture marker
        </title>
        <link href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" rel="stylesheet"/>
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
        <style>
            html, body, #map {
          height: 100%;
        }
        #title {
          position: absolute;
          z-index: 999;
          top: 15px;
          right: 25px;
          color: #333;
        }

        /* Custom icon style */
        .leaflet-echart-icon {
          transition: all 1s;
        }

        .leaflet-container {
          background: rgba(0,0,0,0);
        }
        .chart {
    width: 500px;
    height: 300px;
    background-color: white;
}
        </style>
    </head>
    <body>
        <div id="title">
            <p>
                echart
            </p>
        </div>
        <div id="map">
        </div>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js">
        </script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js">
        </script>
        <script src="echarts.min.js">
        </script>
        <script>
            $(function() {
      // Leaflet Map Init
      function initMap() {
          var selectedPicture;
          var originalZIndex;
          var map = L.map('map', {
              zoomControl: false
          }).setView([30.75, 120.65], 11);
          L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
              maxZoom: 18,
              attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
              id: 'osm'
          }).addTo(map);
          var chart = L.control({position: 'bottomright'});

          chart.onAdd = function (map) {

              var div = L.DomUtil.create('div', 'info chart');
              div.id="chatrdemo";

              return div;
          };



          chart.addTo(map);

          // 基于准备好的dom，初始化echarts实例
                  var myChart = echarts.init(document.getElementById('chatrdemo'));
                  // 指定图表的配置项和数据
                  option = {
                      tooltip: {
                          trigger: 'axis'
                      },
                      xAxis: [{

                          type: 'category',
                          data: ['1月', '2月', '3月', '4月']
                      }],
                      yAxis: [{
                          type: 'value',
                          name: '水量',
                          min: 0,
                          max: 50,
                          interval: 50,
                          axisLabel: {
                              formatter: '{value} ml'
                          }
                      }, {
                          type: 'value',
                          name: '温度',
                          min: 0,
                          max: 10,
                          interval: 5,
                          axisLabel: {
                              formatter: '{value} °C'
                          }
                      }],
                      series: [{
                          name: '蒸发量',
                          type: 'bar',
                          data: [2.0, 4.9, 7.0, 23.2]
                      }, {
                          name: '降水量',
                          type: 'bar',
                          data: [2.6, 5.9, 9.0, 26.4]
                      }, {
                          name: '平均温度',
                          type: 'line',
                          yAxisIndex: 1,
                          data: [2.0, 2.2, 3.3, 4.5]
                      }]
                  };
                  
                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);
      }
      initMap();
  });
        </script>
    </body>
</html>
